Ext.NextTransportList = Ext.extend(Ext.List, {
    title: 'Results',
    itemSelector: 'div.next-transport-list-item',
    overClass: 'over',
    singleSelect: true,
    emptyText: 'No results.',
    isLoaded: false,
    scroll: 'both',

    initComponent: function () {
        Ext.regModel('NextTransport', {
            fields: [
            { name: 'StopName', type: 'string' },
			{ name: 'Distance', type: 'string' },
            { name: 'RouteName', type: 'string' },
            { name: 'Time1', type: 'string' },
            { name: 'Time2', type: 'string' },
            { name: 'Direction', type: 'string' },
		    ]
        });
        
        var store = new Ext.data.Store({ model: 'NextTransport' });
        this.store = store;

        this.tpl = new Ext.XTemplate([
             '<tpl for=".">',

             '<div class="next-transport-list-item">',
                 '<div>',
                     '<input type="button" class="bus-route" value="{RouteName}" />',
                 '</div>',
                 '<div>',
                     '<span><strong>{StopName}</strong></span> <span>Direction: {Direction}</span>',
                 '</div>',
                 '<div>',
                     '<span class="distance">{Distance} mile</span>',
                     '<ul>',
                         '<li>{Time1}</li>',
                         '<li>{Time2}</li>',
                     '</ul>',
                 '</div>',
             '</div>',

             '</tpl>'
        ]);

        this.on('selectionchange', function (e, row, rowdata) {
            alert('Not Implemented');
        });

        Ext.form.ItineraryList.superclass.initComponent.call(this);
    }
});

Ext.reg('nextTransportList', Ext.NextTransportList);

